<template>
	<div id="app" :style="{'max-width': width + 'px', 'height': height + 'px'}">
		<router-view></router-view>
		<!-- 推送通知 -->
		<div class="rule_model" v-if='hasNotice'>
			<div class="rule_model_1">
				<div class="rule_model_2">
						<span  @click="close_notice" class="close_notice"><img src="static/image/close.png" /></span>
						<h1>开启推送通知</h1>
						<ul>
							<li><i class="icon njfont nj-tongzhi"></i>时鲜好货不再错过</li>
							<li><i class="icon njfont nj-cuxiaohuodong"></i>折扣优惠抢先知道</li>
							<li><i class="icon njfont nj-jinrong"></i>宝贝降价马上入手</li>
						</ul>
						<span class="bt" @click="goOpen">立即开启</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
import deepCopy from "./utils/deepCopy";
import axios from "axios";
import { Toast } from "./utils/toast.js";
import { accessLogin, countClickNum } from "./api/wxh/getData.js";

export default {
	data() {
		return {
			width: window.innerWidth,
			responseEventTimer: null, //用来
			// 是否有消息推送
			 hasNotice:false
		};
	},
	beforeCreated() {
		var sessionId = localStorage.getItem("sessionId");
		if (!sessionId || sessionId == "undefined") {
			localStorage.removeItem("sessionId");
		}
	},
	created() {
//		this.initConfigParams();
		this.responseEvent();
	},
	mounted() {
		this.initCart();
		//初始化全局菜单
		this.initMenu();
		//初始化indexedDB库文件
		this.initLocalForage();
		// Toast({
		// 	message: "这是提示框dddd",
		// 	type:'fail',
		// 	duration: 10000000
		// })
	},
	computed: {
		screenWidth: {
			get: function() {
				return this.width;
			},
			set: function(newValue = window.screen.width) {
				// console.log(newValue);
				this.width = newValue;
			}
		},
		height() {
			//   console.log("获取屏幕高度", window.screen.innerHeight);
			return window.innerHeight;
		},
		specialDomTree() {
			let template = this.$store.getters.getConfigParams.templateConfigList.find(
				item => {
					return item.tpDesc === "specialtemplateforaddpages";
				}
			);
			if (template) {
				let obj = JSON.parse(template.tpConfig);
				delete obj.config;
				return obj;
			} else {
				return {};
			}
		},
		...mapGetters("wxh", ["sessionId"])
	},
	methods: {
		resizeEvent() {
			window.addEventListener(
				"resize",
				() => {
					// console.log("执行resize方法");
					// setTimeout(() => {
					// this.screenWidth = window.screen.width;
					window.location.reload();
					// }, 20);
				},
				false
			);
		},
		//初始化localForage
		initLocalForage() {
			let script = document.createElement("script");
			script.onload = () => {
				// localforage.clear();
			};
			script.src = "static/script/lib/localForage.js";
			document.body.appendChild(script);
		},
		//初始化全局菜单
		initMenu() {
			if (window.environment === "production") {
				return;
			}
			if (document.querySelector("script[data-id='menu-script']")) {
				return;
			}
			let menuScript = document.createElement("script");
			menuScript.setAttribute("data-id", "menu-script");
			menuScript.onload = () => {
				// console.log("menuScript加载完毕");
				let bloomingMenu = new BloomingMenu({
					startAngle: 180,
					endAngle: 270,
					radius: 100,
					itemsNum: 4,
					itemAnimationDelay: 0.08
				});
				-bloomingMenu.render();
				//适配不同浏览器的样式
				document.querySelector(".blooming-menu__main-content").innerHTML = "";
				document
					.querySelectorAll(".blooming-menu__item")[3]
					.setAttribute("title", "新增");
				document.querySelectorAll(
					".blooming-menu__item"
				)[3].onclick = this.addTemplate;
				document
					.querySelectorAll(".blooming-menu__item")[2]
					.setAttribute("title", "首页");
				document.querySelectorAll(
					".blooming-menu__item"
				)[2].onclick = this.mBackHome;
				document
					.querySelectorAll(".blooming-menu__item")[1]
					.setAttribute("title", "侧边栏");
				document.querySelectorAll(
					".blooming-menu__item"
				)[1].onclick = this.hideMenu;
				document
					.querySelectorAll(".blooming-menu__item")[0]
					.setAttribute("title", "设置");
				document.querySelectorAll(
					".blooming-menu__item"
				)[0].onclick = this.goSettings;
			};
			menuScript.src = "static/script/lib/menu.js";
			document.querySelector("#app").appendChild(menuScript);
		},
		//新增按钮的点击事件
		addTemplate() {
			// console.log("新增模板");
			// return;
			//默认以启用的模板为新建的蓝图
			let obj;
			for (let item of this.$store.getters.getConfigParams.templateConfigList) {
				if (item.tpState === 1) {
					obj = deepCopy(item);
					break;
				}
			}
			// console.log("新增模板", obj);
			let domTree = JSON.parse(obj.tpConfig);
			//重置新增模板的一些参数
			delete obj.tpConfig;
			delete obj.rid;
			delete obj.createTm;
			delete obj.createUser;
			delete obj.updateTm;
			delete obj.updateUser;
			obj.tpState = 0;

			// console.log(obj);

			//记录当前选则的模板参数
			this.setCurrentTemplate(obj);
			//记录当前选择的模板中的domTree
			this.setDomTree(domTree);
			//进行页面跳转
			this.$router.push({
				path: "/home/home"
			});
		},
		//去编辑页面
		goSettings() {
			this.$router.push({ name: "settings", query: {env: "edit"} });
		},
		//隐藏或显示侧边栏
		hideMenu() {
			PSEvent.trigger("hideMenu");
		},
		//返回首页
		mBackHome() {
			this.backHome();
		},
		//改变页面大小，并且当屏幕宽度小于1370px的时候侧边栏自动隐藏
		resizePage() {
			clearTimeout(this.responseEventTimer);
			// this.responseEventTimer = null;
			this.responseEventTimer = setTimeout(() => {
				// console.log("执行了resizePage方法")
				let width = window.innerWidth;
				//只有当width>1366的时候才会响应变化
				// console.log(width, document.querySelector("#app"));
				if (width > 1366) {
					// document.querySelector(".style-components").style.display = "block";
					this.$store.commit("setStyleComponentsState", "show");
					document.querySelector("#app").style.width = `${width}px`;
				} else if (width <= 1366) {
					//将左边的样式组件变为hover弹出的样式
					// document.querySelector(".style-components").style.display = "none";
					this.$store.commit("setStyleComponentsState", "hide");
				}
			}, 300);
		},
		//将页面做成响应式布局
		responseEvent() {
			//仅在edit模式下该代码才会执行
			if (window.environment === "edit") {
				window.onresize = this.resizePage;
			}
		},
		...mapActions("wxh", ["getUserInfo"]),
		...mapActions("qxz", ["updateLocation", "updateScopeOut"]),
		...mapMutations("wxh", [
			"USER_INFO",
			"LOGO_IN",
			"RECORD_SESSIONID",
			"LOGO_OUT",
			"ClEAR_SESSIONID",
			"CLEAR_INFO"
		]),
		...mapMutations(["setCurrentTemplate", "setDomTree"]),
		...mapMutations("zwy", ["setvuexPhoneNumber", "setvuexPassword"]),
		...mapMutations("xxy", ["setarrpopupnum"]),
		async initData() {
			//**
			//框架未登录时，商城也要保持一致;
			// console.log(location.href.search(/actId/) !== -1);
			// if(location.href.search(/actId/) !== -1) {
			// 	this.ClEAR_SESSIONID('sessionId');
			// 	this.LOGO_OUT(false);
			// 	this.CLEAR_INFO(null);
			// 	localStorage.setItem('chooseAddressActiveIndex', null);
			// 	localStorage.setItem('locateIn', null); 
			// 	localStorage.setItem('locateOut', null);
			// 	return
			// }
			let that = this
			// that.hasNotice=true
			console.log(location.hash,'location')
			if(navigator.userAgent.indexOf('xiangpu') > -1 && (location.hash == '#/' || location.hash == '#/main/home')) {
				console.log('测试一下')
				 cordova.exec(success, fail, "CommonPlugin", "getNotificationStatus", []);
				 console.log(success,'success88')
				 function success(res) {
					 console.log(res,'ress')
					 if(res==1) {
						that.hasNotice=true
						that.$store.commit('xxy/setNotice', true)
					 } else {
						that.hasNotice=false
						that.$store.commit('xxy/setNotice', false)
					 }
				 }
				 function fail(res) {
					console.log(res,'res')
				 }
			}

			if (
				this.sessionId === "null" ||
				this.sessionId === "undefined" ||
				!this.sessionId
			) {
				this.ClEAR_SESSIONID("sessionId");
				this.LOGO_OUT(false);
				this.CLEAR_INFO(null);
				localStorage.setItem("chooseAddressActiveIndex", null);
				localStorage.setItem("locateIn", null);
				localStorage.setItem("locateOut", null);
				return;
			}


			//通过象谱账号登录后，再请求宁家账号的sessionId;
			let request = await accessLogin("eCode=" + api.enterpriseCode);
			if (request.status === 200) {
				if (request.data.data.returncode === 0) {
					Toast({
						message: request.data.data.msg,
						type: "warn",
						duration: api.alertTime_1
					});
					this.RECORD_SESSIONID(null);
					this.LOGO_IN(false);
					this.USER_INFO(null);
					localStorage.setItem("chooseAddressActiveIndex", null);
					localStorage.setItem("locateIn", null);
					localStorage.setItem("locateOut", null);
					return;
				} else {
					this.RECORD_SESSIONID(request.data.data[0]);
					this.LOGO_IN(true);
					this.USER_INFO(request.data.data[1].user);
					let that = this;
					if (navigator.userAgent.indexOf("xiangpu") > -1) {
						cordova.exec(
							success3,
							fail3,
							"CommonPlugin",
							"monitorLoginStatus",
							[]
						);
					}

					function success3(res) {
						that.ClEAR_SESSIONID("sessionId");
						that.LOGO_OUT(false);
						that.CLEAR_INFO(null);
						that.updateLocation(null);
						that.updateScopeOut(null);
						localStorage.setItem("chooseAddressActiveIndex", null);
						localStorage.setItem("locateIn", null);
						localStorage.setItem("locateOut", null);
						localStorage.setItem("cartArray", "");
						localStorage.setItem("cartFoodArray", "");
						localStorage.removeItem("sessionId", "");
						that.$store.dispatch("cjy/queryCart");
						that.setvuexPhoneNumber(null);
						that.setvuexPassword(null);
						that.setarrpopupnum([]);
						localStorage.setItem("phoneNumber", "");

						Toast({
							message: "您的帐号已在其他设备登录！",
							type: "warn",
							duration: 3000
						});
						that.$router.push({ path: "login" });
					}

					function fail3(res) {
						console.log(res, "resfail");
					}
				}
			} else {
				// Toast({
				// 		message:"网络错误！",
				// 		type:'warn',
				// 		duration: api.alertTime_1
				// 	})
				this.RECORD_SESSIONID(null);
				this.LOGO_IN(false);
				this.USER_INFO(null);
			}
		},
		async initCart() {
			await this.getUserInfo();
			await this.initData();
			let sessionId = localStorage.getItem("sessionId");
			this.$store.dispatch("cjy/synCart");
		},
		//初始化配置相关的参数
		async initConfigParams() {
			let config = JSON.parse(sessionStorage.getItem("configParams"));
			// console.log("config", config);
			this.$store.commit("setConfigParams", config);
			//默认启用的domTree
			let mainfest = JSON.parse(
				config.templateConfigList.find(item => {
					// if (item.tpState === 1) {
					// 	console.log("item", item);
					// }
					return item.tpState === 1;
				}).tpConfig
			);
			console.log("window.mainfest", mainfest);
			window.mainfest = mainfest;
			//再加上新增页面的domTree
			//sessionStorage功成身退
			sessionStorage.removeItem("configParams");
		},
		getPath() {
			if (this.$route.query.pushMsgRid) {
				let opt = {
					rid: this.$route.query.pushMsgRid.split("?")[0]
				};
				countClickNum(opt);
			}
		},
		goOpen(){
			let that = this
			console.log('open')
			cordova.exec(success, fail, "CommonPlugin", "setNotificationStatus", []);
			function success(res) {
				that.hasNotice=false
				that.$store.commit('xxy/setNotice', false)
			}
			function fail(res) {
				console.log(res,'res99')
			}
		},
		close_notice() {
			this.hasNotice=false
			this.$store.commit('xxy/setNotice', false)
		}
	},
	beforeDestroy() {
		localStorage.removeItem("scrollTop");
	},
	watch: {
		$route: "getPath" // 监听事件
	}
};
</script>

<style>
@import url("./lib/css/style-components.css");

body {
	overflow: hidden;
}

#app {
	text-align: center;
}

.sdrag-edit {
	position: relative;
}

.sdrag-blue-btn {
	display: inline-block;
	height: 28px;
	border: 1px solid #3876ae;
	width: 70px;
	font-size: 14px;
	background: #3876ae;
	color: #fff;
	line-height: 28px;
	border-radius: 3px;
	cursor: pointer;
	text-align: center;
}

.sdrag-gray-btn {
	display: block;
	height: 28px;
	border: 1px solid #dededd;
	width: 70px;
	font-size: 14px;
	background: #f5f5f5;
	color: #676767;
	line-height: 28px;
	border-radius: 3px;
	cursor: pointer;
	text-align: center;
}

.sdrag-box-style {
	z-index: 10;
	position: absolute;
	right: 0;
	top: -26px;
	width: 142px;
	display: flex;
	justify-content: space-between;
}

.loading-animation {
	width: 100%;
	height: 100%;
}

.picker {
	position: absolute !important;
	z-index: 200 !important;
}

.disabled-cursor {
	cursor: not-allowed;
}

/* Toast的样式 */

.toast_warning {
	border: 2px solid #f0cb85;
}

.aui-toast {
	background: rgba(255, 255, 255, 1);
	text-align: center;
	border-radius: 0.25rem;
	color: #000000;
	position: absolute;
	z-index: 999;
	top: 45%;
	left: 50%;
	padding: 0.5rem 0 0.5rem 0.75rem;
	margin-left: -5em;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
	min-width: 7rem;
	line-height: 1;
	min-height: unset;
}

.aui-toast i.nj-tishi {
	color: #f29f00;
}

.aui-toast i.nj-chenggong {
	color: green;
}

.aui-toast i.nj-shibai {
	color: #c90000;
}

.toast_fail {
	border: 2px solid #ffb8b0;
}

.toast_success {
	border: 2px solid #a7d99d;
}

.aui-toast i {
	margin: 0 !important;
	padding: 0;
}

.aui-toast i {
	display: table-cell;
	font-size: 1.2rem;
	vertical-align: middle;
}

.njfont {
	font-size: 1rem;
	line-height: 1;
}

.njfont {
	font-family: "njfont" !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.aui-toast-content {
	display: table-cell;
	font-size: 0.8rem;
	vertical-align: middle;
	padding: 0 0.4rem;
	min-width: 4.6rem;
}

.container-box .aui-mask.aui-mask-in {
	position: absolute !important;
}

.container-box .aui-dialog.aui-dialog-in {
	position: absolute !important;
	margin-left: 0px !important;
	left: 16% !important;
}

.box.outer-box {
	padding-top: 0px !important;
}

/* 全局菜单的样式 */

body .blooming-menu__container {
	/* left: 0; */
	left: unset;
	bottom: 10px;
	right: 15px;
	position: absolute;
	top: unset;
	transform: translate(0);
	line-height: unset;
}

body .blooming-menu__container .blooming-menu__main {
	line-height: unset;
	display: flex;
	justify-content: center;
	align-items: center;
}

body .blooming-menu__container .blooming-menu__main-content {
	/* line-height: 27px; */
	background: url("../static/image/zhankai.png") no-repeat center;
	background-size: cover;
	display: block;
	height: 20px;
	width: 20px;
}

body .blooming-menu__main-container .is-active {
	transform: rotate(90deg);
}

.blooming-menu__item:nth-of-type(1) .blooming-menu__item-btn {
	background-image: url("../static/image/setting.png");
	background-size: 50%;
}

.blooming-menu__item:nth-of-type(2) .blooming-menu__item-btn {
	background-image: url("../static/image/hide.png");
	background-size: 45%;
}

.blooming-menu__item:nth-of-type(3) .blooming-menu__item-btn {
	background-image: url("./lib/svg/home.svg");
}

.blooming-menu__item:nth-of-type(4) .blooming-menu__item-btn {
	background-image: url("../static/image/new.png");
	background-size: 40%;
}

.blooming-menu__item-btn:hover {
	box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
	opacity: 1;
}

/*门店详情页地图的路径规划样式*/

.amap-call {
	display: none !important;
}

.poi-more {
	display: none;
}

.plan-nobus {
	max-height: 10rem;
	overflow-y: scroll;
}

/*门店详情页地图的路径规划样式*/
/* 商城快讯 v-html样式 */

.contentZx img {
	width: 100%;
}

/* 重置element-ui的级联框样式 */

/*解决我的消息富文本伪类样式问题*/
#app .m-message-list li p:after {
	display: none;
}

/* toast弹出框样式开始 */
.m-toast {
	background: rgba(255, 255, 255, 1);
	border-radius: 0.25rem;
	color: #000000;
	position: absolute;
	z-index: 999;
	top: 50%;
	left: 50%;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
	padding: 0.5rem 0.75rem;
	transform: translate(-50%, -40%);
	max-width: 9rem;
}

.m-toast i {
	font-size: 1.2rem;
}

.m-toast i.nj-tishi {
	color: #f29f00;
}

.m-toast i.nj-chenggong {
	color: green;
}

.m-toast i.nj-shibai {
	color: #c90000;
}
.home-container .aui-radio:checked,
.home-container .aui-radio.aui-checked,
.home-container .aui-checkbox:checked,
.home-container .aui-checkbox.aui-checked {
	background-color: #38b035;
}
.good_check .aui-radio:checked,
.good_check .aui-radio.aui-checked,
.good_check .aui-checkbox:checked,
.good_check .aui-checkbox.aui-checked {
	background-color: #38b035;
}
.green-style .aui-radio:checked,
.green-style .aui-radio.aui-checked,
.green-style .aui-checkbox:checked,
.green-style .aui-checkbox.aui-checked {
	background-color: #38b035;
}
.home-container .coupon_list li::after,
.home-container .coupon_list li::before {
	background-color: #fff;
}
/* 修改支付列表子项的高度 */
#app .aui-list-item {
	min-height: 2.5rem;
}
.rule_model {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		position: absolute;
		z-index: 99999;
		top: 0;
		left: 0;
		color: #000;
		/*display: flex;*/
		/*justify-content: center;*/
	}
	.rule_model_1 {
		width: 62%;
		margin: 0 auto;
		position: absolute;
		top: 50%;
		left: 50%;
	}
	.rule_model_2 {
		height: 50%;
		background: #fff;
		border-radius: 0.5rem;
		transform: translate3d(-50%, -50%, 0);
		transition: .2s;
		padding:0 0 1.5rem;
	}
	.rule_model_2 li .icon {
		width: auto;
		vertical-align: middle;
		display: inline-block;
		width: 1.2rem;
		margin-right: 0.6rem;
		color: #39af37;
	}
	.close_notice {
		position: absolute;
		top: -2.5rem;
		right: 1rem;
		width: 1.5rem;
		height: 2.6rem;
		display: block;
	}
	.close_notice  img {
		display: block;
		width: 100%;
	}
	.rule_model_2 h1 {
		color: #36b22e;
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 0.9rem;
		border-radius: 0.8rem 0.8rem 0 0;
		background: #ecf6eb;
	}
	.rule_model_2 ul {
		margin: 0.8rem 0;
	}
	.rule_model_2 ul li {
		line-height: 1.8rem;
		font-size: 0.7rem;
	}
	.rule_model_2 .bt {
		background: #39af37;
		color: #fff;
		display: inline-block;
		padding: 0.3rem 1.8rem;
		border-radius: 0.8rem;
		font-size: 0.7rem;
	}
</style>
